<div class="row g-0">
    <div class="col-lg-6 order-last order-lg-first">
        <div class="position-relative overflow-hidden bg-black" [style.height]="videoHeight + 'px'">
            <video class="d-block w-100" [style.height]="videoHeight + 'px'" playsinline #remoteVideo></video>
            <canvas class="position-absolute left-top" #canvas></canvas>
            <div class="position-absolute right-top p-4">
                <div class="float-end f32 no-pointer-events" *ngIf="remoteCountryCode$ | async">
                    <span class="align-middle flag" [ngClass]="remoteCountryCode$ | async"></span>
                </div>
            </div>
            <div class="position-absolute center-middle no-pointer-events" *ngIf="!(isConnected$ | async)">
                <img src="assets/openchart-logo-small-white.png" alt="OpenChatRoulette">
            </div>
        </div>
    </div>
    <div class="col-lg-6">
        <div class="position-relative show-on-hover-parent bg-black" [style.height]="videoHeight + 'px'">
            <div class="screen-separator"></div>
            <video class="d-block w-100" [style.height]="videoHeight + 'px'" playsinline muted #myVideo></video>
            <div class="position-absolute left-top w-100 h-100 show-on-hover show-on-hover-bg">
                <div class="position-absolute left-top w-100 p-2 p-md-4">
                    <div class="btn-group float-end" dropdown>
                        <button id="button-lang" dropdownToggle type="button" class="btn btn-secondary rounded"
                                aria-controls="dropdown-lang">
                            <i-tabler name="menu-2" class="icon-big"></i-tabler>
                        </button>
                        <ul id="dropdown-lang" *dropdownMenu class="dropdown-menu dropdown-menu-right"
                            role="menu" aria-labelledby="button-lang">
                            <li role="menuitem">
                                <a class="dropdown-item" [ngClass]="{'active': locale === 'en'}" href="/" i18n>English</a>
                            </li>
                            <li role="menuitem">
                                <a class="dropdown-item" [ngClass]="{'active': locale === 'fr'}" href="/fr/" i18n>French</a>
                            </li>
                            <li role="menuitem">
                                <a class="dropdown-item" [ngClass]="{'active': locale === 'ua'}" href="/ua/" i18n>Ukrainian</a>
                            </li>
                            <li role="menuitem">
                                <a class="dropdown-item" [ngClass]="{'active': locale === 'ru'}" href="/ru/" i18n>Russian</a>
                            </li>
                            <li class="divider dropdown-divider"></li>
                            <li role="menuitem">
                                <a class="dropdown-item" href="https://github.com/andchir/openchatroulette" target="_blank">GitHub</a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="position-absolute left-bottom w-100 p-2 p-md-4">
                    <div class="row">
                        <div class="col-md-6">
                            <div class="row">
                                <div class="col-12">
                                    <div class="btn-group w-100 mb-2 mb-md-0" dropdown [dropup]="true">
                                        <button id="button-camera" dropdownToggle type="button" class="btn btn-secondary btn-lg w-100 rounded"
                                                aria-controls="dropdown-camera">
                                            <i-tabler name="device-computer-camera"></i-tabler>
                                            <span class="px-2" i18n>Camera</span>
                                            <i-tabler name="chevron-up"></i-tabler>
                                        </button>
                                        <ul id="dropdown-camera" *dropdownMenu class="dropdown-menu w-100" role="menu" aria-labelledby="button-camera">
                                            <li role="menuitem" *ngFor="let device of devices$ | async | filter: {kind: 'videoinput'}">
                                                <a class="dropdown-item text-overflow-ellipsis" [ngClass]="{'active': (videoInputDeviceCurrent$ | async) === device.deviceId}"
                                                    href="#"
                                                    (click)="onDeviceChange('videoinput', device)">
                                                    {{ device.label }}
                                                </a>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="btn-group w-100" dropdown [dropup]="true">
                                <button id="button-microphone" dropdownToggle type="button" class="btn btn-secondary btn-lg w-100 rounded"
                                        aria-controls="dropdown-microphone">
                                    <i-tabler name="microphone"></i-tabler>
                                    <span class="px-2" i18n>Microphone</span>
                                    <i-tabler name="chevron-up"></i-tabler>
                                </button>
                                <ul id="dropdown-microphone" *dropdownMenu class="dropdown-menu w-100" role="menu" aria-labelledby="button-microphone">
                                    <li role="menuitem" *ngFor="let device of devices$ | async | filter: {kind: 'audioinput'}">
                                        <a class="dropdown-item text-overflow-ellipsis" [ngClass]="{'active': (audioInputDeviceCurrent$ | async) === device.deviceId}"
                                            href="#"
                                            (click)="onDeviceChange('audioinput', device)">
                                            {{ device.label }}
                                        </a>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="position-absolute left-top p-2 p-md-4">
                <div class="f32 no-pointer-events" *ngIf="countryCodeDetected$ | async">
                    <span class="align-middle flag" [ngClass]="countryCodeDetected$ | async"></span>
                </div>
            </div>
        </div>
    </div>
</div>

<div class="row g-0">
    <div class="col-lg-6 pt-3">

        <div class="container-fluid">
            <div class="row mb-3">
                <div class="col-6">
                    <button type="button" class="btn btn-primary btn-lg d-block w-100 fs-2 px-0 py-3 py-lg-5"
                            [disabled]="!(readyToConnectState$ | async) || !(remotePeerConnectedState$ | async) && (connectedState$ | async)"
                            (click)="rouletteStart()">
                        <div class="btn-animation">
                            <div class="btn-animation-icon"><i-tabler name="arrow-big-left" class="icon-big"></i-tabler></div>
                            <span class="btn-animation-label" *ngIf="!(connectedState$ | async)" i18n>Start</span>
                            <span class="btn-animation-label" *ngIf="connectedState$ | async" i18n>Next</span>
                        </div>
                    </button>
                </div>
                <div class="col-6">
                    <button type="button" class="btn btn-danger btn-lg d-block w-100 fs-2 px-0 py-3 py-lg-5 show-on-hover-parent"
                            [disabled]="!(connectedState$ | async)"
                            (click)="rouletteStop()">
                        <div class="btn-animation">
                            <div class="btn-animation-icon"><i-tabler name="hand-stop" class="icon-big"></i-tabler></div>
                            <span class="btn-animation-label" i18n>Stop</span>
                        </div>
                    </button>
                </div>
            </div>
            <div class="row mb-3">
                <div class="col-6">
                    <button type="button" class="btn btn-secondary btn-options-panel btn-options-panel-left btn-lg d-block w-100 px-0"
                        [ngClass]="{'active': optionsPanelOpened === 'left'}"
                        (click)="optionsPanelToggle('left')">
                        <span class="fs-6 me-2" i18n>Country:</span>
                        <div class="d-block d-md-inline-block">
                            <span class="fs-5 me-2 f32" [title]="currentCountryName">
                                <span class="align-middle flag" [ngClass]="countryCode$ | async | lowercase"></span>
                            </span>
                            <i-tabler name="chevron-up"></i-tabler>
                        </div>
                    </button>
                    <div class="card options-panel position-absolute shadow-sm" *ngIf="optionsPanelOpened === 'left'">
                        <div class="card-body p-5">
                            <div class="row mb-3">
                                <div class="col-md-5">
                                    <h3 i18n>Country</h3>
                                </div>
                                <div class="col-md-7">
                                    <div>
                                        <input type="text" class="form-control" i18n-placeholder placeholder="Search..." [(ngModel)]="countrySearchTerm">
                                    </div>
                                </div>
                            </div>
                            <div class="options-panel-body">
                                <form action="" method="post">
                                    <div class="form-radio-button" *ngFor="let country of countries | filterItems : 'name' : countrySearchTerm | sortSelected: 'name' : currentCountryName">
                                        <input type="radio" name="purpose" id="field-radio-country-{{ country.code }}"
                                               [value]="country.code"
                                               [ngModel]="countryCode$ | async"
                                               (click)="setOptions('country', country.code)">
                                        <label class="f32" for="field-radio-country-{{ country.code }}">
                                            <span class="align-middle flag me-2" [ngClass]="country.code | lowercase"></span>
                                            {{ country.name }}
                                        </label>
                                        <div class="check"></div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="col-6">
                    <button type="button" class="btn btn-secondary btn-options-panel btn-options-panel-right btn-lg d-block w-100 px-0"
                        [ngClass]="{'active': optionsPanelOpened === 'right'}"
                        (click)="optionsPanelToggle('right')">
                        <span class="fs-6 me-2" i18n>Purpose:</span>
                        <div class="d-block d-md-inline-block">
                            <span class="fs-5 me-2">{{ currentPurposeName }}</span>
                            <i-tabler name="chevron-up"></i-tabler>
                        </div>
                    </button>
                    <div class="card options-panel position-absolute shadow-sm" *ngIf="optionsPanelOpened === 'right'">
                        <div class="card-body p-5">
                            <h3 class="mb-4" i18n>Purpose</h3>
                            <div class="options-panel-body">
                                <form action="" method="post">
                                    <div class="form-radio-button" *ngFor="let purpose of purposeList; index as index">
                                        <input type="radio" name="purpose" id="field-radio-purpose{{ index }}"
                                               [value]="purpose.name"
                                               [ngModel]="purpose$ | async"
                                               (click)="setOptions('purpose', purpose.name)">
                                        <label for="field-radio-purpose{{ index }}" i18n="">{{ purpose.title }}</label>
                                        <div class="check"></div>
                                    </div>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>
    <div class="col-lg-6 mb-3">

        <div class="card mb-3 shadow-sm rounded-0">
            <div class="card-body app-message-container" #messagesContainer>
                <ng-container *ngFor="let msg of messages$ | async">
                    <div [class.text-end]="msg.type === 'answer'">
                        <div class="card d-inline-block border-0 rounded-pill mb-3"
                             [ngClass]="{'bg-info round-0-top-right': msg.type === 'answer', 'bg-primary text-white round-0-top-left': msg.type === 'question'}">
                            <div class="card-body">
                                <div class="card-text">{{ msg.message }}</div>
                            </div>
                        </div>
                    </div>
                </ng-container>
            </div>
        </div>

        <div class="container-fluid">
            <div class="row g-2">
                <div class="col-10">
                    <input type="text" class="form-control shadow-sm" i18n-placeholder placeholder="Enter your message"
                           [disabled]="!(remotePeerConnectedState$ | async)"
                           (keyup)="onMessageFieldKeyUp($event)"
                           #messageField>
                </div>
                <div class="col-2">
                    <button type="button" class="btn btn-info d-block w-100 px-0"
                            [disabled]="!(remotePeerConnectedState$ | async)"
                            (click)="sendMessage(messageField)" i18n>Send</button>
                </div>
            </div>
        </div>

    </div>
</div>

<div class="options-panel-backdrop" [ngClass]="{'active': optionsPanelOpened}" (click)="optionsPanelToggle('')"></div>
